<template>
  <div v-if="showAddModal" class="addBank_sm_modal">
    <!--    <nut-action-sheet v-model:visible="showAddModal">-->
    <div class="body vertical center  body_sec">
      <nut-form label-position="top" ref="formRef" class="">
        <div class="flex space_between add_title">
          <span>{{ t('paymentManagement_page_oneBank') }}</span>
          <!--            <span class="close_icon" @click="closeAddBankModal"></span>-->
        </div>
        <nut-form-item :label="t('addBank_page_pChooseBank')">
          <div class="flex space_between choose_bank">
            <div class="flex align_center choose_bank_l">
              <span class="bank_cicon" v-if="chooseBank.value">
                <ImgT :key="chooseBank.value" :src="`/imgs/bankIcon/bank_logo_${chooseBank.value}.webp`"
                  :alt="chooseBank.label" />
              </span>
              <span class="bank_cname"> {{ chooseBank.label }} </span>
            </div>
            <nut-button :bordered="false" class="change_btn" @click="showChangeBank"> {{ t('deposit_page_changeWay')
            }} </nut-button>
          </div>
        </nut-form-item>
        <nut-form-item :label="t('addBank_page_bankCard')">
          <!--  @focus.stop="handleFocus" @blur.prevent="handleBlur"  -->
          <nut-input @input="validateInput" type="number"  v-model.trim="form.cardNo"
            :placeholder="t('paymentManagement_page_chCardNo')" clearable />
        </nut-form-item>
        
        <nut-form-item :label="t('addBank_page_name')">
          <nut-input v-model.trim="form.name" :disabled="!!myBankName" :placeholder="t('addBank_page_pInput')"
            clearable />
        </nut-form-item>

        <div class="btn_zone flex ">
          <nut-button class="submit_btn center pointer" :disabled="loading" block @click="onSubmit">{{
            t('home_page_confirm') }}</nut-button>
        </div>

      </nut-form>
      <!--        <div class="flex align_center bottom_tip">
          <span class="gth-icon">
            <iconpark-icon icon-id="red" size=".875rem"></iconpark-icon>
          </span>
          {{ t('paymentManagement_page_max_bank', { num: myBankList?.length || 0 }) }}
        </div>-->
    </div>
    <!--    </nut-action-sheet>-->
    <!-- 选择银行弹窗 -->
    <chooseBankDialog ref="chooseBankModal" @selectBank="selectBank" />
  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { onMounted, ref, watch } from 'vue';
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { showToast } from '@nutui/nutui';
import { testBankCard, testBankName, replaceChinese } from '@/utils/validateTools';
import chooseBankDialog from '../deposit/chooseBankDialog.vue';
import {useRoute} from "vue-router";
// import { handleBlur, handleFocus } from "@/utils/publicMethods.ts";

const emit = defineEmits(["getMyBindBankList"]);
// const props = defineProps({
//   myBankName: {
//     type: String,
//     default: () => ''
//   },
//   myBankList: {
//     type: Array,
//     default: () => []
//   }
// })

const route = useRoute();
const { t } = useI18n();
const showAddModal = ref(true);
const chooseBankModal = ref();
const myBankName = ref(route.query.bankName || '')

// 提交参数
const dataParams = {
  // currency: null,
  bank: '',
  cardNo: '',
  name: '',
  code: '',
}
const form: any = ref( // 表单提交
  { ...dataParams }
);
const loading = ref(false);// 是否提交中
const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡

// 限制只能输入输入数字
const validateInput = () => {
  form.value.cardNo = form.value.cardNo.replace(/[^0-9]/g, '');
}
const onSubmit = () => {
  // 第二次绑定银行卡需要验证是否已绑定手机号
  // if (!userInfo.value.mobile && props.myBankName) {
  //   return Message.error(t('addBank_page_notPhone'))
  // }
  if (!form.value.bank) {
    return showToast.fail(t('paymentManagement_page_chBank'))
  }
  if (!form.value.cardNo) {
    return showToast.fail(t('paymentManagement_page_chCardNo'))
  }
  if (!testBankCard(form.value.cardNo)) {
    return showToast.fail(t('paymentManagement_page_tip1'))
  }
  if (!form.value.name) {
    return showToast.fail(t('paymentManagement_page_chName'))
  }
  if (!myBankName.value && !testBankName(form.value.name)) {
    form.value.name = replaceChinese(form.value.name);
    return showToast.fail(t('paymentManagement_page_chName'))
  }

  // 第二次绑定银行卡需要验证是否输入验证码
  // if (!form.data.code && myBankName.value) {
  //   return Message.error(t('home_page_enterVerificationCode'))
  // }
  handleSubmit()
};
// 绑定银行卡提交
const handleSubmit = () => {
  loading.value = true;
  const req = NetPacket.req_new_bank_card_info();
  req.bank_id = Number(form.value.bank);
  req.account_number = form.value.cardNo;
  req.cardholder_name = myBankName.value ? myBankName.value : form.value.name?.replace(/\s+/g, '').toUpperCase(); // 保存需要去除空格和转大写
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_req_new_bank_card_info',
    callback: handleAddBank
  })
};
// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  loading.value = false;
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_addBankFail',
    3: 'paymentManagement_page_tip3',
    4: 'paymentManagement_page_tip4',
    5: 'paymentManagement_page_tip4',
  }
  if (res.result === 1) {
    // closeAddBankModal();
    // emit('getMyBindBankList'); // 刷新列表
    setTimeout(() => {history.go(-1)}, 1000)
    showToast.success(t(tips[res.result]))
  } else {
    showToast.fail(t(tips[res.result]))
  }
}
const setBaseData = () => {
  // 已经有绑定过银行卡，需要验证手机验证码
  // if (props.myBankName) {
  //   form.fields.code.showRight = true
  // }
  form.value.name = myBankName.value;
}

const showAddBankModal = () => {
  showAddModal.value = true
}
// const closeAddBankModal = () => {
//   showAddModal.value = false
// }
// 打开银行弹窗
const openChooseBank = () => {
  chooseBankModal.value.onCloseBank();
}
// 更换银行弹窗
const showChangeBank = () => {
  openChooseBank();
}

// 选择银行
const selectBank = (e: any) => {
  form.value.bank = e.value;
  chooseBank.value = e;
}

watch(
  () => showAddModal.value,
  (n) => {
    if (n) { // 重置
      form.value.bank = '';
      form.value.cardNo = '';
      chooseBank.value = { label: '', value: '' };
    }
  }
)
onMounted(() => {
  setBaseData();

})

defineExpose({
  showAddBankModal
});

</script>

<style lang='scss' scoped>
.addBank_sm_modal {
  height: 374px;
  color: #fff;
  //border-radius: 8px;
  //background: #131232;
  //box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

  // 弹窗重置样式
  :deep(.nut-popup) {
    border-radius: 0;
  }

  :deep(.nut-action-sheet) {
    background: #27155c;
    width: 100%;
    height: 80vh;
    bottom: 0;
    top: auto;
  }

  .flex {
    display: flex;
  }

  .space_between {
    justify-content: space-between;
  }

  .justify_center {
    justify-content: center;
  }

  .align_center {
    align-items: center;
  }

  .body {
    height: 100%;
    padding: 16px 14px 24px;

    form {
      .add_title {
        font-weight: 400;
        font-size: 14px;
        color: #A8A8CA;
        line-height: 14px;
        margin-bottom: 18px;

        .close_icon {
          width: 18px;
          height: 18px;
        }
      }

      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;

          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              line-height: 14px;
              margin-bottom: 8px;
              padding: 0;
              color: #fff;
            }

            .nut-input {
              width: 100%;
              height: 44px;
              background: #1D1C3C;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 12px 10px;

              .input-text::placeholder {
                color: #504F6F !important;
              }
            }

          }
        }
      }

      .choose_bank_l {
        width: 235px;
        height: 44px;
        padding-left: 10px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
        border-radius: 8px;

        .bank_cicon {
          display: flex;
          justify-content: center;
          width: 24px;
          height: 24px;
          margin-right: 6px;
          border-radius: 50%;
          background: #fff;
          border: solid 1.5px #d6cdff;

          img {
            width: 22px;
            border-radius: 50%;
          }
        }

        .bank_cname {
          color: #fff;
          font-size: 12px;
          line-height: 16px;
        }
      }

      .change_btn {
        margin-left: 10px;
        border-radius: 8px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        width: 102px;
        height: 44px;
        line-height: 44px;
        padding: 0;
        border: 0;
      }

    }

    .bottom_tip {
      padding: 13px 20px;
      font-weight: 400;
      font-size: 14px;
      color: #E43939;

      .gth-icon {
        margin-right: 4px;
        width: 14px;
        height: 14px;
      }
    }

    .btn_zone {

      .submit_btn {
        color: #fff;
        margin: 16px auto 0;
        font-size: 14px;
        border: 0;
        width: 319px;
        height: 44px;
        border-radius: 8px;
      }
    }

  }

  .body_sec {
    .cz-tips {
      font-size: 12px;
      text-align: center;
      color: #D16363;

      .tip {
        line-height: 10px;

        //.icon {
        //  margin-right: 4px;
        //  display: inline-block;
        //  width: 12px;
        //  height: 12px;
        //  background: url(/imgs/payment/error_icon.webp) center no-repeat;
        //  background-size: 100%;
        //}
      }
    }
  }

}
</style>
